<template>
  <div>
    <!--编写页面静态部分,即view部分-->
    <el-button type="primary" v-on:click="query" icon="el-icon-search">搜索</el-button>
    <el-select v-model="params.siteId" clearable placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.templateId"
      :label="item.templateName"
      :value="item.templateId">
    </el-option>
  </el-select>
  <el-input placeholder="页面别名" v-model="params.pageAliase" clearable style="width:200px"></el-input>
  <router-link :to="{path:'/cms/page/add',query:{page:this.currentPage,size:this.pageSize}}">
    <el-button type="primary" icon="el-icon-plus" :loading="false">添加页面</el-button>
  </router-link>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
      type="index"
      width="50px">
    </el-table-column>
      <el-table-column
        prop="pageName"
        label="页面名称"
        >
      </el-table-column>
      <el-table-column
        prop="pageAliase"
        label="别名"
        >
      </el-table-column>
      <el-table-column
        prop="pageType"
        label="页面类型"
        width="100px">
      </el-table-column>
      <el-table-column
        prop="pageWebPath"
        label="访问路径"
        >
      </el-table-column>
      <el-table-column
        prop="pagePhysicalPath"
        label="物理路径"
        >
      </el-table-column>
      <el-table-column
        prop="pageCreateTime"
        label="创建时间"
        >
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        >
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.pageId)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteById(scope.row.pageId)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
    style="float:right"
    layout="prev, pager, next"
    :total="total"
    :page_size="pageSize"
    :current-page="currentPage"
    @current-change="pageChange">
  </el-pagination>
  </div>

</template>
<script>
  /*编写页面静态部分,即model及vm部分.*/
  import * as cmsApi from '../api/cms'
  export default {
    data() {
      return {
        tableData: [],
        total:100,
        pageSize:10,
        currentPage:1,
        params:{
          siteId:'',
          templateId:'',
          pageAliase:''
        },
        options:[{
          templateId:'5a751fab6abb5044e0d19ea1',
          templateName:'cms主页面'
          },{
            templateId:'102',
            templateName:'测试页面'
          }]

      }
    },
    methods: {
      //编辑页面
      handleClick(row) {
        this.$router.push({
          path:'/cms/page/edit',
          query:{
            pageId:row,
            page:this.currentPage,
            size:this.pageSize
          }
        })
      },
      //删除页面
      deleteById(id) {
        this.$confirm('确认删除吗?','警告',{}).then(()=>{
          cmsApi.page_delete(id).then((res)=>{
          console.log(res);
          if(res.success){
            this.$message({
              message:"删除成功",
              type:'success'
            })
            this.query();
          }else{
            this.$message.error("删除失败");
          }
        })
        })
      },
      query(){
        cmsApi.page_list(this.currentPage,this.pageSize,this.params).then((res)=>{
          this.tableData=res.queryResult.list;
          this.total=res.queryResult.total;
        })
      },
      pageChange(page){//翻页
        this.currentPage=page;
        this.query();
      }
    },
    mounted(){
      //加载页面数据
      this.query();
    },
    created(){
      //从路由上获取参数
      this.currentPage=Number.parseInt(this.$route.query.page || 1);
      this.pageSize=Number.parseInt(this.$route.query.size || 10);
    }
  }
</script>
<style>
  /*编写页面样式,不是必须*/
</style>
